{{#if template}}
<template>
  <div class="page">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>
        <routerLink :to="{name: 'clientManage'}">客户管理</routerLink>
      </el-breadcrumb-item>
    </el-breadcrumb>

    <div class="top-bar">
      <div class="operation-left">
        <el-button type="primary" @click="addClient">添加客户企业</el-button>
      </div>
      <div class="operation-right">
        <el-input
            class="module-search"
            placeholder="请输入企业名称"
            @keyup.native="checkKeywords"
            @keyup.enter.native="search"
            @change="checkKeywords"
            clearable
            v-model="keywords">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
    </div>

    <div class="table-wrapper">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            type="index" header-align="center" align="center"
            label="序号"
            width="60">
        </el-table-column>
        <el-table-column
            prop="enterpriseName"
            label="企业名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="contactPerson"
            label="联系人"
            width="70"
        >
        </el-table-column>
        <el-table-column
            prop="contactPhone"
            label="联系电话">
        </el-table-column>
        <el-table-column
            prop="emailAddress"
            label="邮箱地址">
        </el-table-column>
        <el-table-column
            label="操作" header-align="center" align="center"
            width="240">
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="iconfont icon-bianji" @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-popover
                :ref="'popover'+scope.row.id"
                placement="top"
                width="180"
                v-model="scope.row.visible"
            >
              <p>此操作将删除该记录, 是否继续?</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
                <el-button
                    type="primary"
                    size="mini"
                    @click.native="handleDelete(scope.$index, scope.row)"
                >确定
                </el-button>
              </div>
              <el-button
                  type="text"
                  size="mini"
                  class="danger"
                  slot="reference"
                  icon="iconfont icon-shanchu-m"
              >删除
              </el-button>
            </el-popover>
            <el-button type="text" size="mini" icon="iconfont icon-detail" @click="handleView(scope.$index, scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-content">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageSetting.pageNum"
            :page-sizes="pageSetting.sizes"
            :page-size="pageSetting.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageSetting.totalRecords">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
{{/if}}

{{#if script}}
<script>
import {debounce} from '@/utils';

export default {
  name: '{{ properCase name }}',
  data() {
    return {
      keywords: '',
      dateRange: [],
      status: '',
      carrierMode: '',
      tableData: [],
      pageSetting: {
        pageNum: 1,
        pageSize: 10,
        totalRecords: 1,
        totalPage: 1,
        sizes: [10, 20, 30, 40, 50, 100]
      }
    };
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    /**
     * 获取列表数据
     */
    getData: debounce(function() {
      let params = {pageSize: this.pageSetting.pageSize, pageNum: this.pageSetting.pageNum};
      if (this.keywords && this.keywords.trim()) {
        params = {...params, keywords: this.keywords};
      }
      if(this.dateRange){
        params = {...params, startDate: this.dateRange[0], endDate: this.dateRange[1]};
      }
      if(this.status){
        params = {...params, status: this.status};
      }
      if(this.carrierMode){
        params = {...params, carrierMode: this.carrierMode};
      }
      this.axios.get(URLS.clientList, {params}).then(res => {
        if (res && res.success) {
          this.tableData = res.data;
          this.pageSetting.pageNum = res.pageNum;
          this.pageSetting.pageSize = res.pageSize;
          this.pageSetting.totalPages = res.totalPages;
          this.pageSetting.totalRecords = res.totalRecords;
        }
      });
    }, 200),
    search() {
      this.getData();
    },
    checkKeywords(){
      if (!this.keywords || this.keywords.trim().length === 0) {
        this.getData();
      }
    },
    addClient() {
      this.$router.push({name: 'clientManageCreate'});
    },
    handleView(index, row) {
      const id = row.id;
      if (id) {
        this.$router.push({name: 'clientManageDetails', params: {id}});
      }
    },
    handleEdit(index, row) {
      const id = row.id;
      if (id) {
        this.$router.push({name: 'clientManageEdit', params: {id}});
      }
    },
    handleDelete(index, row) {
      const id = [];
      id.push(row.id);
      this.axios.post(URLS.clientDelete, id).then(res => {
        if (res && res.success) {
          this.getData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        } else {
          this.$message.error(res.msg || '操作失败。');
        }
      });
    },
    handleSizeChange(val) {
      this.pageSetting.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageSetting.pageNum = val;
      this.getData();
    }
  }
}
</script>
{{/if}}

{{#if style}}
<style lang="scss" scoped>

</style>
{{/if}}
